<template>
  <div id="LabApplyItem">
    <Breadcrumb content="收费项目标志" />
    <div class="bodyContent">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="keyupFeeItemEnter" @search-click="getFeeItemList()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getFeeItemList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="leftTable">
            <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" height="auto" :scroll-y="{ enabled:true }" resizable show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="rowClick" :data="FeeItemList" :loading="showLoading">
              <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="feeCode" title="项目编号" width="120"></vxe-column>
              <vxe-column field="feeName" title="项目名称" width="240"></vxe-column>
              <vxe-column :field="colitem.code" :title="colitem.name"  v-for="(colitem, index) in feeItemSignList" :key="index" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #header>
                  <span style="font-size: 300">{{ colitem.name }}</span>
                </template>
                <template #default="{ row,rowIndex}">
                  <div v-if="colitem.type === 'chekbox'">
                    <vxe-checkbox v-model="row[colitem.code]" checked-value='1' unchecked-value='0' @change="editRow(row.feeCode,colitem.code,$event,colitem.type)"></vxe-checkbox>
                  </div>
                  <div v-if="colitem.type === 'input'">
                    <vxe-input v-model="row[colitem.code]" @change="editRow(row.feeCode,colitem.code,$event,colitem.type)"></vxe-input>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息



import { AppStore } from "@/stores/store";
import {IsEmpty} from "@/utils/common";

// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let store = AppStore();

let conWidth = ref(document.documentElement.clientWidth);
let FeeItemList = reactive([]);
let feeItemSignList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let saveLoading = ref(false); //保存
let form = reactive({}); //右侧基本信息表单
let labFeeItemForm = reactive({
  id: '',
  feeCode: '',
  feeName: '',
  feeClass: '',
  inputCode: '',
  hisItemCode: '',
  hisItemName: '',
  hisItemType: '',
  department: '',
  spec: '',
  price: 0,
  cost: 0,
  fitSex: '',
  isEmergency: '',
  shortName: '',
  startTime: '',
  endTime: '',
  remake: '',
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
});
let searchValue = ref('');
let defaultProps = {
  children: 'children',
  label: 'name'
};


// 方法定义区 =============
onMounted(() => {
  getFeeItemList();
  getDictFeeItemSignList();
});

function editRow(feeCode, dictCode,dictValue,type) {
  const data = {
    feeCode:feeCode,
    dictCode:dictCode,
    dictValue:dictValue.value,
    type:type,
    orgId: store.userInfo.orgId

  };
  const url = '/api/qi/feeitemSign/updateFeeitemSign';
  proxy.$http
      .post(url, data)
      .then((res: any) => {
        if (res && res.status && !IsEmpty(res.status.code) && res.status.code === 200) {
        } else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });

}

function getDictFeeItemSignList() {
  feeItemSignList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
      .get(url, { params: { code: 'feeItemSign' } })
      .then((res: any) => {
        feeItemSignList.push(...res.data);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}
// 获取申请项目列表
function getFeeItemList() {
  FeeItemList.length = 0;
  showLoading.value = true;
  const url = '/api/qi/feeitemSign/findFeeItemList';
  let obj = {
    keyWords: searchValue.value,
    orgId: labFeeItemForm.orgId
  };
  proxy.$http
      .get(url, { params: obj })
      .then((res: any) => {
        FeeItemList.push(...res.data);
        showLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        showLoading.value = false;
      });
}

// 点击当前行// 行点击事件
const rowClick = ({ row }) => {
  Object.assign(form, row);
  Object.assign(labFeeItemForm, row);
};

// 保存
function save() {
  let url = '';
  if (labFeeItemForm.id == '' || labFeeItemForm.id == null || labFeeItemForm.id == undefined) {
    url = '/lis/fee/item/addFeeItem';
  } else {
    url = '/lis/fee/item/editFeeItem';
  }
  proxy.$http
      .post(url, labFeeItemForm)
      .then((res: any) => {
        VxeMessage(res.status.msg, VxeNotifyType.success);
        getFeeItemList();
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}

// 回车查询
function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getFeeItemList();
  }
}

</script>
<style lang="scss" scoped>
#LabApplyItem {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
    .leftTable {
      height: calc(100% - 40px);
    }
  }
}
</style>
